<template>
  <div style="height: 100%;">
    <BgAnimation/>
  <div class="outputContainer">

    <div class="outputItem">
        <div class="centerStyle outputTitle">
          当日累计产量
        </div>
        <div class="centerStyle outputContent">
          {{vData.todayCount}}
        </div>
    </div>
    <div class="outputItem">
      <div class="centerStyle outputTitle">
        实时节拍(秒)
      </div>
      <div class="centerStyle outputContent">
        {{vData.equipRate}}
      </div>
    </div>
    <div class="outputItem">
      <div class="centerStyle outputTitle">
        实时温度(℃)
      </div>
      <div class="centerStyle outputContent">
        {{vData.temperature}}
      </div>
    </div>
    <div class="outputItem">
      <div class="centerStyle outputTitle">
        实时湿度(%RH)
      </div>
      <div class="centerStyle outputContent">
        {{vData.humidity}}
      </div>
    </div>
  </div>
  
</div>
</template>
<!-- 当日累计产量 -->
<script>
import {watch, ref, onMounted, reactive} from 'vue'
import BgAnimation from './BgAnimate.vue'
import {useVisualizingCustomerStore} from '/@/stores/visualizingCustomer'
import { storeToRefs } from 'pinia';
import {getEquipCurrentRunData} from '/@/api/visualizing/slave'
import lodash from 'lodash'

export default {
  components: {
    BgAnimation
  },
  setup() {
    const store = useVisualizingCustomerStore()
    const {customer_id,current_equip_num} = storeToRefs(store)
    console.log("customer_id",current_equip_num.value);
    const vData = reactive({
      todayCount: 0,
      equipRate: 0,
      humidity: 0,
      temperature: 0
    })
    const getEquipSinglesData = async () => {
      const res = await getEquipCurrentRunData(customer_id.value, current_equip_num.value.equipNum)
      vData.todayCount = lodash.get(res, 'data.todayCount', 0)
      vData.equipRate = lodash.get(res, 'data.equipRate', 0)
      vData.humidity = lodash.get(res, 'data.humidity', 0)
      vData.temperature = lodash.get(res, 'data.temperature', 0)
      setTimeout(() => {
        getEquipSinglesData()
      }, 1000*3);
    }
    watch(()=>current_equip_num.value.id, (newVal, oldVal) => {
      getEquipSinglesData();
    },{deep: true})
    return {
      vData,
      customer_id,
      current_equip_num
    }
    // getEquipSinglestatusData()
  }

}
</script>
<style lang="less" scoped>
.outputContainer {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* 一行两列 */
  justify-items: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 100%;
  width: 100%;
  /* 设置容器高度为视窗高度 */
  /* 设置容器边框 */
}

.outputItem {
  /* 设置容器边框 */
  // height: 100%;
  // width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 设置主轴方向为垂直 */
}
.outputContentItem{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outputTitle{
  color: rgb(44, 123, 254);
  font-size: 20px;
}
.outputContent{
  color: #75deef;
  font-size: 40px;
}
</style>
